<template>
  <div>
    <div id="left" class="left-normal" />
    <div id="right" class="right-normal" />
  </div>
</template>

<script>
import Compare from './comparable'
import Coordinate from '@/components/map/coordinate'
import MeasureSync from '@/components/map/measureSync'

export default {
  name: 'TwoMap',
  components: { Coordinate },
  props: {
    baseLayers: {
      type: Array,
      default: function() {
        return []
      }
    },
    center: {
      type: Array,
      default: function() {
        return [132.41, 47.25]
      }
    }
  },
  mounted() {
    const leftMap = new mapboxgl.Map({
      container: 'left',
      style: {
        version: 8,
        sprite:
          'http://218.10.70.76:8090/iserver/services/map-TieLu/rest/maps/电支柱/tilefeature/mvtsprites/sprite',
        glyphs:
          'http://218.10.70.76:8090/iserver/services/map-TieLu/rest/maps/电支柱/tileFeature/sdffonts/{fontstack}/{range}.pbf',
        sources: {},
        layers: []
      },
      units: 'degree',
      crs: 'EPSG:4490',
      center: this.center,
      zoom: 7,
      trackResize: true
    })
    const rightMap = new mapboxgl.Map({
      container: 'right',
      style: {
        version: 8,
        sprite:
          'http://218.10.70.76:8090/iserver/services/map-TieLu/rest/maps/电支柱/tilefeature/mvtsprites/sprite',
        glyphs:
          'http://218.10.70.76:8090/iserver/services/map-TieLu/rest/maps/电支柱/tileFeature/sdffonts/{fontstack}/{range}.pbf',
        sources: {},
        layers: []
      },
      units: 'degree',
      crs: 'EPSG:4490',
      center: this.center,
      zoom: 7,
      trackResize: true
    })
    rightMap.addControl(new Coordinate(), 'bottom-left')
    leftMap.addControl(new Coordinate(), 'bottom-left')
    rightMap.addControl(new mapboxgl.NavigationControl(), 'bottom-right')
    rightMap.addControl(new mapboxgl.ScaleControl({}))
    leftMap.addControl(new mapboxgl.NavigationControl(), 'bottom-right')
    leftMap.addControl(new mapboxgl.ScaleControl({}))
    const compare = new Compare(leftMap, rightMap)
    compare.setMode(2)
    // let measure = new MeasureSync(leftMap,rightMap);
    this.$emit('oneMapInstanceComplete', leftMap, rightMap, compare)
  }
}
</script>

<style >
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
  margin: 0 15px 110px 0;
  float: right;
}
</style>
